﻿
    <div class="container-fluid alert alert-dark" role="alert">

        <div class="row">
            <div class="col-xl-8">
                <h5><strong>@Title</strong></h5>
            </div>
            @if (IsShowSearch)
            {
                <div class="col-xl-4">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Search for..." 
                               @bind="SearchText"
                               @onkeyup="OnChanged">

                        <span class="input-group-btn">
                            <button class="btn btn-primary" type="button" @onclick="OnSearch">Search</button>
                        </span>
                    </div>
                  </div>
                }

        </div>

        @ChildContent
        </div>




@code{
    [Parameter]
    public string Title { get; set; }

    [Parameter]
    public string SearchText { get; set; }

    [Parameter]
    public bool IsShowSearch { get; set; }

    [Parameter]
    public RenderFragment ChildContent { get; set; }

    [Parameter]
    public Action<string> SearchClick { get; set; }


    private void OnSearch()
    {
        SearchClick(SearchText);
    }

    private void OnChanged(KeyboardEventArgs e)
    {
        if (e.Key == "Enter")
        {
            SearchClick(SearchText);
        }

        if (e.Key == "Escape")
        {
            SearchText = "";
        }
    }
}
